<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<!-- <image style="width: 100rpx;height: 100rpx;" :src="totalConfig.appInfo.logo" mode="widthFix">
			</image> -->
			<text class="title">动物识别</text>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" class="input" type="text" style="height: 90rpx;"
					placeholder="请输入手机号" maxlength="30" />
			</view>
			<view class="input-item flex align-center" style="position: relative;">
				<input v-model="loginForm.code" type="text" class="input" style="height: 90rpx;" placeholder="请输入验证码"
					maxlength="20" />
				<view class="yanbox" style="" @click.stop="getCode">
					{{msg}}
				</view>
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" style="height: 90rpx;"
					placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password2" type="password" class="input" style="height: 90rpx;"
					placeholder="请再次输入密码" maxlength="20" />
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn  round">注册</button>
				<!-- <view class="font4">
					<view class="" @click="tofindpwd">
						忘记密码
					</view>
					<view class="" @click="tozhuce">
						注册账号
					</view>
				</view> -->
			</view>
		</view>

		<!-- <view class="xieyi text-center" style="margin-bottom: 5px;">
			<text class="text-grey1">登录即代表同意</text>
			<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
			<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
		</view> -->

		<!-- <view class="xieyi text-center">
			<text class="text-grey1">版本号:v1.0.0</text>
		</view> -->
	</view>
</template>

<script>
	import {
		getCodeImg,
		signup
	} from '@/api/login'
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: "",
					password2: "",
					code: "",
				},
				msg: '获取验证码',
				hadgetcod: false
			}
		},

		created() {
			// this.getCode();
		},
		methods: {
			// 获取图形验证码
			getCode() {
				let that = this
				if(this.loginForm.username===''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(this.hadgetcod){
					return
				}
				this.hadgetcod=true
				getCodeImg({tel:this.loginForm.username}).then(res => {
					this.msg='60s后重新获取'
					let num=60
					let timer = setInterval(function(){
						if(num>1){
							num=num-1
							that.msg = num+'s后重新获取'
						}else{
							that.hadgetcod=false
							that.msg='获取验证码'
							clearInterval(timer)
							timer = null
						}
					},1000)
				}).catch(msg => {
					that.hadgetcod=false
				})
				
			},
			
			// 获取图形验证码
			getCode2() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let files = []
						files = [{
								name: 'originlmage',
								file: tempFilePaths[0]
							},
							{
								name: 'thumblmage',
								file: tempFilePaths[1]
							}
						]
						uni.uploadFile({
							url: '/elder/chat/image/upload',
							files: files,
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});

				let that = this
				if (this.loginForm.username === '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.hadgetcod) {
					return
				}
				this.hadgetcod = true
				getCodeImg({
					tel: this.loginForm.username
				}).then(res => {
					this.msg = '60s后重新获取'
					let num = 60
					let timer = setInterval(function() {
						if (num > 1) {
							num = num - 1
							that.msg = num + 's后重新获取'
						} else {
							that.hadgetcod = false
							that.msg = '获取验证码'
							clearInterval(timer)
							timer = null
						}
					}, 1000)
				}).catch(msg => {

					that.hadgetcod = false
				})

			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
				} else if (this.loginForm.code === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
				} else if (this.loginForm.password === "") {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
				} else if (this.loginForm.password2 === "") {
					uni.showToast({
						icon: 'none',
						title: '请再次输入密码'
					})
				} else if (this.loginForm.password2 !== this.loginForm.password) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
				} else {
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				let params = {
					username: this.loginForm.username,
					password: this.loginForm.password,
					code: this.loginForm.code,
				}
				signup(params).then(res => {

					uni.showToast({
						icon: 'none',
						title: '注册成功'
					})
					uni.navigateBack()
				}).catch(msg => {
					console.log('msg', msg)
				})

			},
			// 登录成功后，处理函数
			loginSuccess(result) {

			},
			tofindpwd() {
				uni.navigateTo({
					url: '/pages/login/find'
				})
			},
			tozhuce() {
				uni.navigateTo({
					url: '/pages/login/region'
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 28rpx;
					line-height: 40rpx;
					text-align: left;
					padding-left: 30rpx;

					::v-deep .uni-input-input {
						line-height: 40rpx;
					}
				}

			}

			.login-btn {
				margin-top: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #4e98dc;
				color: #fff;
				border-radius: 45rpx;
				font-size: 30rpx;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}

	.font4 {
		width: 100%;
		margin-top: 30rpx;
		text-align: right;
		color: #4e98dc;
		text-decoration: underline;
		display: flex;
		justify-content: space-between;
	}

	.yanbox {
		z-index: 9999999999;
		position: absolute;
		right: 30rpx;
		top: 10rpx;
		height: 70rpx;
		font-size: 26rpx;
		line-height: 70rpx;
	}
</style>